<template>
  <div>
    <div id="viewDiv">
      <div id="editorDiv">
        <div class='infowin'
             v-if='isWindowShow'
             :style="infoStyle">
          <div class='content'>
            <span class='title'>每平方公里面积:</span>
            <span class='data'>{{AMJ}}㎡</span>
          </div>
          <div class="content">
            <span class='title'>地下空间面积:</span>
            <span class='data'>{{MJ}}㎡</span>
          </div>
          <div class='content'>
            <span class='title'>蜂窝图面积:</span>
            <span class='data'>450平方公里</span>
          </div>
        </div>
      </div>

    </div>

    <div class='ruler'
         id='ruler'
         v-drag
         ref='ruler'>
    </div>
    <div id='sketch'
         v-show='sketchTool'
         v-drag
         class='sketch'
         ref='sketch'></div>

  </div>
</template>
<script>
import esriLoader from "esri-loader"
import Bus from "../utils/bus.js"
import { Loading } from 'element-ui'
export default {
  name: "",
  components: {
  },
  props: {},
  data () {
    return {
      dialogVisible: false,
      loadingInstance: '',
      isNowShow: false,
      isPlanShow: false,
      MJ: 0,
      AMJ: 0,
      isWindowShow: false,
      content: '',
      width: 400,
      height: 237,
      offset: 30,
      beforePoint: [],
      beforeMapPoint: [],
      infoStyle: {
        left: 0,
        top: 0,
        position: 'absolute',
      },
      measurement: false,
      isMeasurement: false,
      sketchTool: false,
      measurementRule: '',
      disX: 0,
      disY: 0,
    }
  },
  // 添加自定义拖拽方法
  directives: {
    drag (el, bindings) {
      el.onmousedown = function (e) {
        var disX = e.pageX - el.offsetLeft;
        var disY = e.pageY - el.offsetTop;
        document.onmousemove = function (e) {
          el.style.left = e.pageX - disX + 'px';
          el.style.top = e.pageY - disY + 'px';
        }
        document.onmouseup = function () {
          document.onmousemove = document.onmouseup = null;
        }
      }
    }
  },
  mounted () {
    const options = {
      url: this.$api.mapDependency.init
    }
    esriLoader.loadModules(
      [
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/WebTileLayer",
        "esri/layers/FeatureLayer",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Sketch/SketchViewModel",
        "esri/tasks/Geoprocessor",
        "esri/tasks/support/FeatureSet",
        "esri/Graphic",
        // "esri/renderers/HeatmapRenderer",
        'esri/layers/CSVLayer',
        'esri/layers/MapImageLayer',
        // 4.13最新的模块
        'esri/widgets/Measurement',
        'esri/geometry/Extent',
        'esri/geometry/SpatialReference',
        'esri/widgets/Sketch'

      ], options).then(
        ([
          Map,
          MapView,
          WebTileLayer,
          FeatureLayer,
          GraphicsLayer,
          SketchViewModel,
          Geoprocessor,
          FeatureSet,
          Graphic,
          CSVLayer,
          MapImageLayer,
          // HeatmapRenderer,
          Measurement,
          Extent,
          SpatialReference,
          Sketch
        ]) => {
          let polygonGraphicsLayer = new GraphicsLayer();
          let sketchLayer = new GraphicsLayer()

          let sketchViewModel;
          let drawGraphic;
          let inputGraphicContainer = [];
          let featureSet = new FeatureSet();
          let _this = this
          let rendererFlag = 0  //默认是0，按功能类型1，单项功能类型2，地下层数3，地下单层4
          let gp = new Geoprocessor(this.$api.mapServer.gpLayer)
          console.log(gp)
          let a = []
          let b = []
          // 区域高亮图层
          let layerBusiness3 = new MapImageLayer({
            url: this.$api.mapServer.businessLayer3

          })
          let layerBusiness2 = new FeatureLayer({
            url: this.$api.mapServer.businessLayer2

          })
          let layerBusiness1 = new FeatureLayer({
            url: this.$api.mapServer.businessLayer1
          })
          // let layerBusiness = new FeatureLayer({
          //   url: this.$api.mapServer.businessLayer
          // })
          let layerBusiness0 = new FeatureLayer({
            url: this.$api.mapServer.businessLayer0
          })
          let conditionLayer0 = new FeatureLayer({
            url: this.$api.mapServer.conditionLayer0,
            visible: false
          })
          //地下空间现状配色
          let fillSymbolXZ = {
            type: "simple-fill",
            color: [181, 122, 255, 0.5],
            outline: {
              color: [132, 0, 255],
              width: 2
            }
          };
          let XZRenderer = {
            type: "simple",
            symbol: fillSymbolXZ
          };
          //地下空间规划配色
          let fillSymbolGH = {
            type: "simple-fill",
            color: [254, 66, 24, 0.5],
            outline: {
              color: [255, 0, 24],
              width: 2
            }
          };
          let GHRenderer = {
            type: "simple",
            symbol: fillSymbolGH
          }
          let fillSymbol = {
            type: "simple-fill",
            color: [226, 119, 40, 0.75],
            outline: {
              color: 'yellow',
              width: 1
            }
          }

          // 基础图层服务
          let layerTiles = new WebTileLayer({
            urlTemplate: this.$api.mapServer.baseLayer
          })
          // 蜂窝图层
          let layerFW = new FeatureLayer({
            url: this.$api.mapServer.cellularLayer,
            visible: false,
          })
          // 热力图
          const curl =
            "http://172.16.0.25/2.csv";
          const renderer = {
            type: "heatmap",
            colorStops: [
              { color: "#219143", ratio: 0.083 },
              { color: "#56f027", ratio: 0.366 },
              { color: "#ffff00", ratio: 0.515 },
              { color: "#ffda14", ratio: 0.698 },
              { color: "#fb7804", ratio: 0.813 },
              { color: "#fb3d2e", ratio: 1 }
            ],
            maxPixelIntensity: 150,
            minPixelIntensity: 10
          };
          const layerHeatmap = new CSVLayer({
            url: curl,
            copyright: "cjyiz",
            visible: false,
            renderer: renderer
          });

          //将图层加入到地图上,layerTiles必须第一个，否则会覆盖其他图层
          let map = new Map({
            // layerTiles底图
            // layerBusiness1为红色框图层
            // layerBusiness2为蓝色框图层
            // layerBusiness 为带图标的商业区图层
            // layerFW为蜂窝图层
            layers: [layerTiles, conditionLayer0, layerFW, layerHeatmap, layerBusiness1, layerBusiness2, layerBusiness3, layerBusiness0, sketchLayer],
            slider: false
          })
          const mapCenter = [118.779038, 32.04841]
          const view = new MapView({
            container: "viewDiv",
            map: map,
            zoom: 13,
            center: mapCenter,
            highlightOptions: {
              color: '#fff000'
            }
          })

          function showinfowindow (x, y) {
            // 弹窗大小改变，这里参数也需要改变
            _this.infoStyle.left = x + "px";
            _this.infoStyle.top = (y - 55) + "px";
          }
          function leftClick (e) {
            _this.isWindowShow = true;
            var screenpoint = view.toScreen(e.mapPoint);
            _this.beforeMapPoint = e.mapPoint;
            showinfowindow(screenpoint.x, screenpoint.y);
          }
          function follow () {
            let screenpoint = view.toScreen(_this.beforeMapPoint)
            showinfowindow(screenpoint.x, screenpoint.y)
          }

          // 地图区域高亮及点击高亮区域触发弹框
          let highlight;
          let selectSpace = function (featureLayer) {
            view.whenLayerView(featureLayer).then(function (layerView) {
              // 监听点击事件,为什么事件会触发那么多次
              setTimeout(
                () => {
                  view.on('click', (event) => {
                    //返回当前鼠标所在区域图层中最顶层的要素
                    view.hitTest(event).then((event) => {
                      let results = event.results
                      let result = results[0];
                      let title = result.graphic.layer.title
                      let featureLayerId = result.graphic.sourceLayer.layerId
                      let tiltleConfig = title.substring(0, 4)
                      // 由于不做图层id判断的话，不同图层要素可能会互相影响，有相同FID的不同result.graphic会互相影响
                      // 同时不做ID判断，地图其他点击事件会冲突
                      if (tiltleConfig === 'GHPQ') {
                        if (result && featureLayerId === featureLayer.layerId) {
                          Bus.$emit('showUnderground', result)
                          highlight = layerView.highlight(result.graphic)
                        }
                      }
                    })
                  })
                }, 100)
              // 监听鼠标移动事件
              view.on("pointer-move", function (event) {
                // 对于同样的事件，有多少个图层，就会执行多少次这样的操作
                view.hitTest(event).then(function (event) {
                  let results = event.results
                  let result = results[0];
                  if (layerFW.visible === false) {
                    highlight && highlight.remove();
                    let featureLayerId = result.graphic.sourceLayer.layerId
                    if (result && featureLayerId === featureLayer.layerId) {
                      highlight = layerView.highlight(result.graphic)
                    }
                  }

                }).catch(() => {
                  highlight && highlight.remove();
                });
              })
            })
          }

          // 查询蜂窝图层要素
          let cellular = function (featureLayer) {
            view.whenLayerView(featureLayer).then(function (layerView) {
              view.on("click", function (event) {
                clearInterval()
                //这里单击会同时触发上面区域高亮的监听，只是做了不同条件的判断
                view.hitTest(event).then((event) => {
                  let results = event.results
                  let result = results[0];
                  highlight && highlight.remove()
                  let title = result.graphic.layer.title
                  let tiltleConfig = title.substring(0, 4)
                  _this.MJ = parseInt(result.graphic.attributes.Mj)
                  _this.AMJ = parseInt(_this.MJ / 1.13)
                  highlight && highlight.remove()
                  if (tiltleConfig === 'Fwrl') {
                    leftClick(result)
                    highlight = layerView.highlight(result.graphic)
                    // 直接用定时器控制容器始终加载在地图上
                    setInterval(follow, 10)
                  }
                }
                )
              })
            })
          }
          //将事件添加到地图上，并执行
          view.when().then(function () {
            selectSpace(layerBusiness0)
            selectSpace(layerBusiness2)
            cellular(layerFW)
          })

          // 分析工具
          setUpSketchViewModel();
          let viewshedGraphics
          function setUpSketchViewModel () {
            map.add(polygonGraphicsLayer);
            Bus.$on('mapAnalyze', () => {
              console.log('开始画图')
              view.popup.close();
              polygonGraphicsLayer.remove(drawGraphic);
              sketchViewModel.create("polygon");
            })
            Bus.$on('cancelAnalyze', () => {
              console.log('取消画图')
              view.popup.close();
              polygonGraphicsLayer.remove(drawGraphic);
              polygonGraphicsLayer.removeMany(viewshedGraphics)
              sketchViewModel.cancel("polygon")
            })
            sketchViewModel = new SketchViewModel({
              view: view,
              layer: polygonGraphicsLayer,
              pointSymbol: {
                type: "simple-marker",
                color: 'green',
                size: "1*$precent",
                outline: {
                  color: "green",
                  width: 0
                }
              }
            });
          }
          sketchViewModel.on("create", function (event) {
            if (event.state === "complete") {
              // this polygon will be used to query features that intersect it
              drawGraphic = event.graphic; //每次绘制完以后的graphic
              inputGraphicContainer.push(drawGraphic);
              featureSet.features = inputGraphicContainer;
              // 入口图层
              let params = {
                pclip: featureSet
              }

              Loading.service({ fullscreen: true })
              _this.loadingInstance = Loading.service()

              gp.submitJob(params).then(

                res => {
                  drawResultData(res)
                }
              )
              // 手动限制，60s没有加载出结果就自动关闭
              setTimeout(() => {
                _this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                  _this.loadingInstance.close();
                });
              }, 600000000)
            }
          });
          function drawResultData (result) {
            console.log(result)
            let jobId = result.jobId;
            let status = result.jobStatus;
            // if (status == 'job-succeeded') {
            if (status === 'job-submitted') {
              //成功之后，将其中的结果取出来，当然这也是参数名字。
              //在模型中，想要取出中间结果，需要设置为模型参数
              gp.getResultData(jobId, "presult").then(
                (res) => {
                  console.log(res)
                  addResults(res)
                }
              )
            }
          }
          function addResults (results) {
            // console.log(results)
            let resultFeatures = results.value.features;
            viewshedGraphics = resultFeatures.map(function (feature) {
              feature.symbol = fillSymbol;
              return feature;
            });
            polygonGraphicsLayer.addMany(viewshedGraphics);
            map.add(polygonGraphicsLayer)
            _this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
              _this.loadingInstance.close();
            });


          }

          // 行政区

          let xzqs
          let polylineGraphic = null
          $.getJSON('http://172.16.0.25/cc.json', function (data) {
            xzqs = data
          })
          // 与地下空间各区总面积图表联动
          Bus.$on('region', e => {
            let i
            switch (e) {
              case '高淳区':
                i = 0;
                break;
              case '浦口区':
                i = 1;
                break;
              case '六合区':
                i = 2;
                break;
              case '溧水区':
                i = 3;
                break;
              case '雨花台区':
                i = 4;
                break;
              case '建邺区':
                i = 5;
                break;
              case '秦淮区':
                i = 6;
                break;
              case '栖霞区':
                i = 7;
                break;
              case '下关区':
                i = 8;
                break;
              case '鼓楼区':
                i = 9;
                break;
              case '玄武区':
                i = 10;
                break;
              case '白下区':
                i = 11;
                break;
              case '江宁区':
                i = 12;
                break;
            }
            if (polylineGraphic != null) {
              view.graphics.remove(polylineGraphic)
            }
            let polyline = {
              type: "polyline",
              paths: xzqs.features[i].geometry.coordinates[0]
            }
            var lineSymbol = {
              type: "simple-line",
              color: [0, 0, 0],
              width: 2.5,
              style: "dash"
            };
            polylineGraphic = new Graphic({
              geometry: polyline,
              symbol: lineSymbol,
            });
            view.graphics.add(polylineGraphic)
            var pextent = polylineGraphic.geometry.extent;
            view.goTo(pextent.expand(1.5));
          })
          // 行政区
          // 四城
          let fourCity
          $.getJSON('http://172.16.0.25/四城.json', function (data) {
            fourCity = data
          })
          Bus.$on('fourCity', e => {
            let i
            switch (e) {
              case '南京南站-红花机场中心':
                i = 0;
                break;
              case '河西中心':
                i = 1;
                break;
              case '新街口-鼓楼中心':
                i = 2;
                break;
              case '江北中心':
                i = 3;
                break;
            }
            if (polylineGraphic != null) {
              view.graphics.remove(polylineGraphic)
            }
            let polylineCity = {
              type: "polyline",
              paths: fourCity.features[i].geometry.coordinates
            }
            var lineSymbolCity = {
              type: "simple-line",
              color: [0, 0, 0],
              width: 2.5,
              style: "dash"
            };
            polylineGraphic = new Graphic({
              geometry: polylineCity,
              symbol: lineSymbolCity,
            });
            view.graphics.add(polylineGraphic)

            view.goTo(polylineGraphic.geometry.extent);
          })
          // 四城
          let elevenUrl = 'http://172.16.0.25/十一片.json'
          let square
          $.getJSON(elevenUrl, function (data) {
            square = data
          })
          Bus.$on('elevenCity', e => {
            let i
            switch (e) {
              case '高淳副中心':
                i = 0;
                break;
              case '东山副中心':
                i = 1;
                break;
              case '三桥中心':
                i = 2;
                break;
              case '夫子庙':
                i = 3;
                break;
              case '湖南路':
                i = 4;
                break;
              case '仙林副中心':
                i = 5;
                break;
              case '红山-黑墨营':
                i = 6;
                break;
              case '下关滨江':
                i = 7;
                break;
              case '燕子矶':
                i = 8;
                break;
              case '南京北站':
                i = 9;
                break;
              case '石头河':
                i = 10;
                break;
            }
            if (polylineGraphic != null) {
              view.graphics.remove(polylineGraphic)
            }
            let polyline = {
              type: "polyline",
              paths: square.features[i].geometry.coordinates
            }
            var lineSymbol = {
              type: "simple-line",
              color: [0, 0, 0],
              width: 2.5,
              style: "dash"
            };
            polylineGraphic = new Graphic({
              geometry: polyline,
              symbol: lineSymbol,
            });
            view.graphics.add(polylineGraphic)
            view.goTo(polylineGraphic.geometry.extent);
          })


          // 地图工具编辑
          // 地图重置
          Bus.$on("mapHome", () => {
            view.graphics.remove(polylineGraphic)
            map.remove(polygonGraphicsLayer)
            layerHeatmap.visible = false
            layerFW.visible = false
            _this.isWindowShow = false
            _this.isNowShow = false
            _this.isPlanShow = false
            _this.Measurement = false
            _this.isMeasurement = false
            _this.sketchTool = false
            view.goTo({
              center: mapCenter,
              zoom: 13,
              rotation: 0
            })
          })
          // 地图上回到初始中心结束
          // 移除地图缩放工具
          view.ui.remove("zoom")



          // 控制蜂窝图显示隐藏
          Bus.$on("cellularToggle", () => {
            layerFW.visible = !layerFW.visible
            if (layerFW.visible === false) {
              _this.isWindowShow = false
            }
          })
          //控制热力图显示隐藏
          Bus.$on('heatmapToggle', () => {
            layerHeatmap.visible = !layerHeatmap.visible
          })
          // 控制现状图层显示隐藏
          planLayer()
          //这里显示隐藏必须单独控制，否则会互相冲突
          function planLayer () {
            let nowLayer = new FeatureLayer({
              url: _this.$api.mapServer.conditionLayer6,
              renderer: XZRenderer,
              visible: false
            })
            let planLayer = new FeatureLayer({
              url: _this.$api.mapServer.conditionLayer7,
              renderer: GHRenderer,
              visible: false
            })



            map.addMany([nowLayer, planLayer]);
            Bus.$on('selectNow', (e) => {
              if (e) {
                _this.isNowShow = true
                nowLayer.visible = true
              } else {
                _this.isNowShow = false
                nowLayer.visible = false
              }
            })

            // cjyiz  图层渲染
            var sym1 = { //交通类型配色
              type: "simple-fill",
              color: [255, 123, 17, 0.5],
              outline: {
                color: [228, 47, 4],
                width: 1
              }
            };
            var sym2 = { //公共类型配色
              type: "simple-fill",
              color: [17, 255, 107, 0.5],
              outline: {
                color: [11, 178, 74],
                width: 1
              }
            };
            var sym3 = { //商业类型配色
              type: "simple-fill",
              color: [24, 107, 235, 0.5],
              outline: {
                color: [9, 67, 152],
                width: 1
              }
            };
            var sym4 = { //居住类型配色
              type: "simple-fill",
              color: [164, 91, 13, 0.5],
              outline: {
                color: [148, 66, 6],
                width: 1
              }
            };
            var sym5 = { //工业类型配色
              type: "simple-fill",
              color: [120, 120, 120, 0.5],
              outline: {
                color: [95, 95, 95],
                width: 1
              }
            };
            var sym6 = { //市政类型配色
              type: "simple-fill",
              color: [66, 64, 183, 0.5],
              outline: {
                color: [61, 27, 123],
                width: 1
              }
            };
            var sym7 = { //防灾类型配色
              type: "simple-fill",
              color: [255, 0, 0, 0.5],
              outline: {
                color: [184, 9, 1],
                width: 1
              }
            };

            var sym_u1 = { //U1层配色
              type: "simple-fill",
              color: [80, 88, 250, 0.5],
              outline: {
                color: [80, 88, 250],
                width: 1
              }
            };
            var sym_u2 = { //U2层配色
              type: "simple-fill",
              color: [144, 71, 253, 0.5],
              outline: {
                color: [144, 71, 253],
                width: 1
              }
            };
            var sym_u3 = { //U3层配色
              type: "simple-fill",
              color: [144, 71, 253, 0.5],
              outline: {
                color: [144, 71, 253],
                width: 1
              }
            };
            var sym_u4 = { //U4层配色
              type: "simple-fill",
              color: [86, 3, 129, 0.5],
              outline: {
                color: [104, 3, 156],
                width: 1
              }
            };
            var sym_u5 = { //U5层配色
              type: "simple-fill",
              color: [39, 1, 35, 0.5],
              outline: {
                color: [62, 2, 56],
                width: 1
              }
            };

            var typeInfos = [
              {
                value: "交通",
                symbol: sym1,
                label: "交通"
              },
              {
                value: "公共",
                symbol: sym2,
                label: "公共"
              },
              {
                value: "商业",
                symbol: sym3,
                label: "商业"
              },
              {
                value: "居住",
                symbol: sym4,
                label: "居住"
              },
              {
                value: "工业",
                symbol: sym5,
                label: "工业"
              },
              {
                value: "市政",
                symbol: sym6,
                label: "市政"
              },
              {
                value: "防灾",
                symbol: sym7,
                label: "防灾"
              }
            ];

            var floorInfos = [{
              value: "U1",
              symbol: sym_u1,
              label: "U1"
            },
            {
              value: "U2",
              symbol: sym_u2,
              label: "U2"
            },
            {
              value: "U3",
              symbol: sym_u3,
              label: "U3"
            },
            {
              value: "U4",
              symbol: sym_u4,
              label: "U4"
            },
            {
              value: "U5",
              symbol: sym_u5,
              label: "U5"
            }
            ];
            // 地下空间按功能分类配色
            const typeRenderer = {
              type: 'unique-value', //配色类型，单一值类型
              field: 'LX',   //按照类型字段区分渲染
              defaultSymbol: null,  //默认配色
              defaultLabel: '地下空间现状',  //默认标签
              uniqueValueInfos: typeInfos
            }
            // 现状地下空间按楼层配色渲染
            const floorRenderer = {
              type: 'unique-value', //配色类型，单一值类型
              field: 'LC',   //按照类型字段区分渲染
              defaultSymbol: null,  //默认配色
              defaultLabel: '地下空间现状',  //默认标签
              uniqueValueInfos: floorInfos
            }
            // 根据楼层显示地下层总
            Bus.$on('floorToggle', e => {
              if (e === '关闭楼层详情') {
                conditionLayer0.visible = true
                if (rendererFlag != 3) {
                  // 2019年的图层
                  conditionLayer0.renderer = floorRenderer
                  b = [true, true, true, true, true, true, true]
                  rendererFlag = 3
                } else {
                  conditionLayer0.renderer = XZRenderer
                  rendererFlag = 0
                }
              } else if (e === '打开楼层详情') {
                conditionLayer0.visible = false
              }
            })
            // 根据用途显示地下层总
            Bus.$on('useToggle', e => {
              if (e === '关闭功能详情') {
                conditionLayer0.visible = true
                if (rendererFlag != 1) {
                  // 2019年的图层
                  conditionLayer0.renderer = typeRenderer
                  a = [true, true, true, true, true, true, true, true, true, true, true]
                  rendererFlag = 1
                } else {
                  conditionLayer0.rendere = XZRenderer
                  rendererFlag = 0
                }
              } else if (e === '打开功能详情') {
                conditionLayer0.visible = false
              }
            })


            // 根据用途选择单个，按单项功能类型配色
            let TypeInfos = [
              {
                value: "交通",
                symbol: sym1,
                label: "交通"
              },
              {
                value: "公共",
                symbol: sym2,
                label: "公共"
              },
              {
                value: "商业",
                symbol: sym3,
                label: "商业"
              },
              {
                value: "居住",
                symbol: sym4,
                label: "居住"
              },
              {
                value: "工业",
                symbol: sym5,
                label: "工业"
              },
              {
                value: "市政",
                symbol: sym6,
                label: "市政"
              },
              {
                value: "防灾",
                symbol: sym7,
                label: "防灾"
              }
            ];
            Bus.$on('singleType', e => {
              // 传入一个索引值
              console.log(e)
              let i = 0
              switch (e) {
                case '交通':
                  i = 0;
                  break;
                case '公共':
                  i = 1;
                  break;
                case '商业':
                  i = 2;
                  break;
                case '居住':
                  i = 3;
                  break;
                case '工业':
                  i = 4;
                  break;
                case '市政':
                  i = 5;
                  break;
                case '防灾':
                  i = 6;
                  break;
              }
              a[i] = !a[i]
              if (a[i]) {
                TypeInfos.push(typeInfos[i])
              } else {
                for (let j = 0; j < TypeInfos.length; j++) {
                  if (TypeInfos[j].value === typeInfos[i].value) {
                    TypeInfos.splice(j, 1)
                  }
                }
              }
              let singleTypeRenderer = {
                type: 'unique-value',
                field: 'LX',
                defaultSymbol: null, //默认配色
                defaultLabel: '地下空间现状',
                uniqueValueInfos: TypeInfos
              }
              conditionLayer0.renderer = singleTypeRenderer
            })


            // 查看单项层
            let FloorInfos = [{
              value: "U1",
              symbol: sym_u1,
              label: "U1"
            },
            {
              value: "U2",
              symbol: sym_u2,
              label: "U2"
            },
            {
              value: "U3",
              symbol: sym_u3,
              label: "U3"
            },
            {
              value: "U4",
              symbol: sym_u4,
              label: "U4"
            },
            {
              value: "U5",
              symbol: sym_u5,
              label: "U5"
            }
            ];
            Bus.$on('singleFloor', e => {
              console.log(e)
              let c = Math.abs(e)
              console.log(a)
              let i = 0
              switch (c) {
                case 110:
                  i = 0;
                  break;
                case 90:
                  i = 1;
                  break;
                case 70:
                  i = 2;
                  break;
                case 50:
                  i = 3;
                  break;
                case 30:
                  i = 4;
                  break;
              }
              b[i] = !b[i]
              if (b[i]) {
                FloorInfos.push(floorInfos[i])
              } else {
                for (let j = 0; j < FloorInfos.length; j++) {
                  if (FloorInfos[j].value === floorInfos[i].value) {
                    FloorInfos.splice(j, 1)
                  }
                }
              }
              console.log(FloorInfos)
              let singleFloorRenderer = {
                type: 'unique-value',
                field: 'LC',
                defaultLabel: '地下空间现状',
                uniqueValueInfos: FloorInfos
              }
              conditionLayer0.renderer = singleFloorRenderer
            })
            // 控制规划图层显示隐藏
            Bus.$on('selectPlan', (e) => {
              if (e) {
                planLayer.visible = true
                _this.isPlanShow = true
              } else {
                _this.isPlanShow = false
                planLayer.visible = false
              }
            })
            // 监听时间轴事件，然后进行删除创建图层操作
            Bus.$on('mapId', e => {
              map.removeMany([nowLayer, planLayer])
              console.log(e)
              // e=3就是2016年   对应图层6，7
              // 修改之后e=2是2017年
              let nowMapId = 10 - (e + 1) * 2
              let planMapId = nowMapId + 1
              if (nowMapId < 0) {
                nowMapId = 0
              }
              if (planMapId < 0) {
                planMapId = 0
              }
              const nowLayerUrl = _this.$api.mapServer.conditionLayer + nowMapId
              const planLayerUrl = _this.$api.mapServer.conditionLayer + planMapId
              nowLayer = new FeatureLayer({
                url: nowLayerUrl,
                renderer: XZRenderer,
                visible: _this.isNowShow
              })
              planLayer = new FeatureLayer({
                url: planLayerUrl,
                renderer: GHRenderer,
                visible: _this.isPlanShow
              })
              map.addMany([nowLayer, planLayer])
            })
          }
          // 素描工具
          const sketch = new Sketch({
            container: 'sketch',
            layer: sketchLayer,
            view: view
          });

          // view.ui.add(sketch, "bottom-right");
          Bus.$on('sketch', () => {
            _this.sketchTool = !_this.sketchTool
            console.log(_this.sketchTool)
            console.log('sketch')
          })


          // 地图测量工具
          let measurement
          Bus.$on('2dArea', () => {
            _this.measurement = !_this.measurement
            measurement2D('area')
          })
          Bus.$on('2dDistance', () => {
            _this.measurement = !_this.measurement
            measurement2D('distance')

          })
          function measurement2D (e) {
            if (_this.isMeasurement) {
              measurement.clear()
            }
            if (_this.measurement) {
              measurement = new Measurement({
                view: view,
                activeTool: e,
                container: 'ruler'
              })
              _this.isMeasurement = true
            }
          }

          Bus.$on('selectFloor', e => {
            console.log(e)
          })


          // 最外层括号
        }
      ).catch(err => {
        // console.log(err)
      })
  }
} 
</script>
<style>
@import url("http://172.16.0.51:81/arcgis_js_v412_api/arcgis_js_api/library/4.12/esri/css/main.css");
/* @import "./map.scss"; */
</style>
<style lang="scss">
.esri-sketch__button:hover,
.esri-sketch__button:focus {
  background-color: #3d48e4 !important;
}
.esri-icon-undo:hover {
  background-color: #3d48e4 !important;
}
.esri-icon-undo:focus {
  background-color: #3d48e4;
}
.esri-icon-redo:hover {
  background-color: #3d48e4 !important;
}
.esri-sketch__button.esri-sketch__button--selected:hover {
  background-color: #3d48e4;
  // background: url("../../static/image/地图控件选中.png") no-repeat;
  // background-size: 150% 150%;
}
#viewDiv {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0px;
}
.sketch {
  position: fixed;
  top: 50%;
  left: 50%;
  .esri-sketch__info-panel {
    opacity: 1;
    transition: opacity 250ms ease-in-out;
    &:empty {
      opacity: 0;
      padding: 0;
      visibility: hidden;
    }
  }
  .esri-icon-pan:before {
    font-family: "iconfont";
    content: "\e6a2";
    color: red;
  }
  .esri-icon-cursor:before {
    font-family: "iconfont";
    content: "\e60c";
    color: red;
  }
  .esri-icon-map-pin:before {
    font-family: "iconfont";
    content: "\e662";
    color: red;
  }
  .esri-icon-polyline:before {
    font-family: "iconfont";
    content: "\e61d";
    color: red;
  }
  .esri-icon-polygon:before {
    font-family: "iconfont";
    content: "\e6ec";
    color: red;
  }
  .esri-icon-checkbox-unchecked:before {
    font-family: "iconfont";
    content: "\e629";
    color: red;
  }
  .esri-icon-radio-unchecked:before {
    font-family: "iconfont";
    content: "\e63d";
    color: red;
  }
  .esri-icon-undo:before {
    font-family: "iconfont";
    content: "\e618";
    color: red;
  }
  .esri-icon-redo:before {
    font-family: "iconfont";
    content: "\e6ed";
    color: red;
  }
  .esri-icon-trash:before {
    font-family: "iconfont";
    content: "\e62d";
    color: red;
  }

  .esri-sketch__panel {
    background-color: #2ba7cd;
    // background: url("../../static/image/测量面板切图/bg_测量面板.png") no-repeat;
    // background-size: 100% 100%;
    align-items: center;
    display: flex;
    justify-content: center;
    flex-flow: row nowrap;
    padding: 0;

    .esri-sketch__button--selected {
      background-color: #3d48e4 !important;
    }
    .esri-sketch__button.esri-sketch__button--selected {
      background-color: #3d48e4;
    }

    .esri-sketch__button:hover {
      background-color: #3d48e4;
    }
    .esri-sketch__section {
      align-items: center;
      display: flex;
      flex-flow: row nowrap;
      padding: 0 7px;
      margin: 6px 0;
      .esri-sketch__button {
        align-items: center;
        background-color: transparent;
        border: none;
        display: flex;
        font-size: 16px;
        height: 32px;
        justify-content: center;
        text-align: center;
        transition: background-color 125ms ease-in-out;
        width: 32px;
      }
    }
  }
}
$precent: 100vw / 1920;
.ruler {
  position: fixed;
  top: 50%;
  left: 50%;
}

.esri-select {
  border: none;
  color: white;
  background: url("../../static/image/测量面板切图/测量面板选择框.png")
    no-repeat;
  background-size: 100% 100%;
  > option {
    background: #4a48dbe3;
  }
}
.esri-area-measurement-3d__settings {
  width: 240px;
}
.esri-area-measurement-3d__units-label {
  color: #00f1ed;
  font-size: 15px;
}
.esri-area-measurement-3d__hint-text {
  color: #00f1ed;
}
.esri-area-measurement-3d__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("../../static/image/测量面板切图/bg_测量面板.png") no-repeat;
  background-size: 100% 100%;
  height: 220px;
  width: 250px;
  padding: 0 20px;

  > section {
    width: 200px;
  }
}
.esri-area-measurement-3d__measurement {
  padding: 0px;
  background: rgba(0, 0, 0, 0);
}
.esri-area-measurement-3d__actions {
  padding: 0px 15px 15px 20px;
}
.esri-area-measurement-3d__clear-button {
  background: url("../../static/image/测量面板切图/btn.png") no-repeat;
  background-size: 100% 100%;
  padding-bottom: 20px;
  height: 40px;
  width: 210px;
  opacity: 0.8;
  color: #00f1ed;
  border: none;
}
.esri-area-measurement-3d__clear-button:hover {
  background: url("../../static/image/测量面板切图/btn.png") no-repeat;
  background-size: 100% 100%;
  height: 40px;
  width: 210px;
  opacity: 1;
  border: none;
}
.esri-area-measurement-3d__measurement-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #00f1ed;

  .esri-area-measurement-3d__measurement-item-title {
    color: inherit;
  }
  .esri-area-measurement-3d__measurement-item-value {
    color: inherit;
  }
}

// 11
.esri-direct-line-measurement-3d__settings {
  width: 240px;
}
.esri-direct-line-measurement-3d__units-label {
  color: #00f1ed;
  font-size: 15px;
}
.esri-direct-line-measurement-3d__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("../../static/image/测量面板切图/bg_测量面板.png") no-repeat;
  background-size: 100% 100%;
  height: 220px;
  width: 250px;
  padding: 0 20px;

  > section {
    width: 200px;
  }
}
.esri-direct-line-measurement-3d__measurement {
  padding: 0px;
  background: rgba(0, 0, 0, 0);
}
.esri-direct-line-measurement-3d__actions {
  padding: 0px 15px 15px 20px;
}
.esri-direct-line-measurement-3d__clear-button {
  background: url("../../static/image/测量面板切图/btn.png") no-repeat;
  background-size: 100% 100%;
  padding-bottom: 20px;
  height: 40px;
  width: 210px;
  opacity: 0.8;
  color: #00f1ed;
  border: none;
}
.esri-direct-line-measurement-3d__clear-button:hover {
  background: url("../../static/image/测量面板切图/btn.png") no-repeat;
  background-size: 100% 100%;
  height: 40px;
  width: 210px;
  opacity: 1;
  border: none;
}
.esri-direct-line-measurement-3d__measurement-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #00f1ed;

  .esri-direct-line-measurement-3d__measurement-item-title {
    color: inherit;
  }
  .esri-direct-line-measurement-3d__measurement-item-value {
    color: inherit;
  }
}
// 11
.esri-popup__main-container {
  border: none;
  /* background-color: rgba(0, 0, 0, 0); */
  background: url("../../static/image/1/蜂窝弹出.png") no-repeat;
  background-size: 100% 100%;
  height: 108 * $precent;
  width: 298 * $precent !important;
}
.esri-popup__header {
  display: none;
}
.esri-popup__footer .esri-popup__footer--has-actions {
  display: none;
}
.esri-popup__footer {
  display: none;
}
.esri-popup__feature-menu {
  display: none;
}

.esri-popup__content {
  /* background: url("../../static/image/1/蜂窝弹出.png") no-repeat;
  background-size: 100% 100%;
  height: 200*$precent;
  width: 400*$precent; */

  border: none;
  background-color: rgba(0, 0, 0, 0);
}
// .esri-widget {
//   background-color: rgba(0, 0, 0, 0);
// }

.popupContent {
  padding-top: 10px;
  text-align: left;
  div {
    height: 28 * $precent;
    line-height: 28 * $precent;
  }
  .title {
    font-size: 18px;
    color: white;
  }
  .content {
    font-style: italic;
    font-weight: 400;
    color: #fff000;
    font-size: 21px;
  }
}
.esri-popup--shadow {
  box-shadow: none;
}
.esri-popup__pointer-direction {
  background-color: #fff000;
}

.infowin {
  background: url("../../static/image/1/蜂窝弹出长脚.png") no-repeat;
  background-size: 100% 100%;
  height: 118 * $precent;
  width: 358 * $precent;
  padding-top: 20 * $precent;
  text-align: left;
  .content {
    padding-left: 60 * $precent;
    height: 30 * $precent;
    line-height: 30 * $precent;
    .title {
      font-style: "黑体";
      font-size: 18 * $precent;
      color: white;
    }
    .data {
      margin-left: 10 * $precent;
      font-style: italic;
      font-weight: 400;
      color: #fff000;
      font-size: 24 * $precent;
    }
  }
}
.esri-distance-measurement-3d__container {
  background-color: #fff000 !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
}
</style>
